<template>
  <div class="cube_editor" style="padding:20px;">
    <div>
      魔方密度：
      <el-select v-model="size">
        <el-option :value="4" label="4×4"></el-option>
        <el-option :value="5" label="5×5"></el-option>
        <el-option :value="6" label="6×6"></el-option>
        <el-option :value="7" label="7×7"></el-option>
      </el-select>
    </div>
    <div class="cube">
      <div
        v-for="n in size*size"
        class="cube_item"
        :style="{width: `calc(${1/size*100}% + 1px)`,paddingBottom: 1/size*100 + '%', background: ifSelect(n) ? '#e8f7fd' : 'transparent'}"
        @click="cubeClick(n)"
        @mouseenter="cubeMove(n)">
      </div>
      <div
        v-for="obj,n in areas"
        :class="{cube_area: true, actived: curArea === n}"
        @click="curArea = n"
        :style="areaStyle(obj)">
        <div v-if="!obj.url" class="area_info">比例:1:{{calcRatio(obj)}}</div>
        <img :src="obj.url" alt="" width="100%" height="100%">
        <i class="el-icon-circle-close area_delete" @click="handleBackOneStep()"></i>
      </div>
    </div>
    <div class="cl">
      <div class="field-tit">图片间隙：</div>
      <div class="field-bd">
        <el-slider v-model="data.margin" :max="10"></el-slider>
      </div>
    </div>
    <template v-if="curArea !== null">
      <div class="cl" v-if="areas[curArea]" style="margin-bottom:15px;">
        <div class="field-tit">图片：</div>
        <div class="field-bd"><el-button @click="dialog=true">选择图片</el-button></div>
      </div>
      <div class="cl" v-if="areas[curArea]">
        <div class="field-tit">链接地址：</div>
        <div class="field-bd">
          <el-input v-model="areas[curArea].link" type="text"></el-input>
        </div>
      </div>
    </template>
    <!-- 选择图片 -->
    <el-dialog ref="dialog" title="选择图片" :visible.sync="dialog">
      <dialog-image></dialog-image>
      <div slot="footer">
        <el-button type="primary" @click="handleSelectImage">确定</el-button>
        <el-button @click="dialog=false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {mapState} from 'vuex'
  import dialogImage from '@/components/common/content/dialogImage'
  export default {
    props: ['data'],
    components: {dialogImage},
    data () {
      return {
        size: this.data.size,
        selStart: 0,
        selEnd: 0,
        selected: false,
        areas: this.data.areas,
        curArea: null,
        dialog: false
      }
    },
    watch: {
      size: function (val) {
        this.curArea = null
        this.areas = []
        this.data.size = val
      },
      areas: function (val) {
        this.data.areas = val
      }
    },
    computed: {
      ...mapState({
        selectedImg: state => state.sourceManage.selected
      })
    },
    methods: {
      cubeClick (n) {
        if (!this.selected) {
          this.selStart = n
          this.selEnd = n
          this.selected = true
        } else {
          this.selected = false
          this.areas.push({start: this.selStart, end: this.selEnd, url: '', link: ''})
        }
        // if (!this.selected) {
        //   this.selected = true
        //   this.areas.push({start: n, end: n})
        // }
      },
      cubeMove (n) {
        const areas = this.areas
        // 是否处于框选区域的状态
        if (this.selected) {
          const x1 = (this.selStart - 1) % this.size
          const y1 = Math.floor((this.selStart - 1) / this.size)
          const x2 = (n - 1) % this.size
          const y2 = Math.floor((n - 1) / this.size)
          const midX1 = (x1 + x2) / 2
          const midY1 = (y1 + y2) / 2
          const width1 = Math.abs(x1 - x2)
          const height1 = Math.abs(y1 - y2)
          if (!areas.length) {
            this.selEnd = n
          } else {
            for (let i = 0, l = areas.length; i < l; i++) {
              const x3 = (areas[i].start - 1) % this.size
              const y3 = Math.floor((areas[i].start - 1) / this.size)
              const x4 = (areas[i].end - 1) % this.size
              const y4 = Math.floor((areas[i].end - 1) / this.size)
              const midX2 = (x3 + x4) / 2
              const midY2 = (y3 + y4) / 2
              const width2 = Math.abs(x3 - x4)
              const height2 = Math.abs(y3 - y4)
              if (Math.abs(midX1 - midX2) <= (width1 + width2) / 2 && Math.abs(midY1 - midY2) <= (height1 + height2) / 2) {
                return
              }
            }
            this.selEnd = n
          }
        }
      },
      ifSelect (n) {
        if (this.selected) {
          const q1 = Math.floor((this.selStart - 1) / this.size)
          const q2 = Math.floor((this.selEnd - 1) / this.size)
          const q3 = Math.floor((n - 1) / this.size)
          const r1 = (this.selStart - 1) % this.size
          const r2 = (this.selEnd - 1) % this.size
          const r3 = (n - 1) % this.size
          if ((q1 <= q3 && q3 <= q2 || q2 <= q3 && q3 <= q1) && (r1 <= r3 && r3 <= r2 || r2 <= r3 && r3 <= r1)) {
            return true
          }
        }
        return false
      },
      // 返回选中区域的style
      areaStyle (obj) {
        const size = this.size
        const left = (obj.start - 1) % size < (obj.end - 1) % size ? obj.start : obj.end
        const top = obj.start < obj.end ? obj.start : obj.end
        return {
          width: (Math.abs((obj.start - 1) % size - (obj.end - 1) % size) + 1) / size * 100 + '%',
          height: (Math.abs(Math.floor((obj.start - 1) / size) - Math.floor((obj.end - 1) / size)) + 1) / size * 100 + '%',
          left: `calc(${(left - 1) % size / size * 100}% - 1px)`,
          top: `calc(${Math.floor((top - 1) / size) / size * 100}% - 1px)`
        }
      },
      // 计算区域的比例
      calcRatio (obj) {
        const x1 = (obj.start - 1) % 4
        const y1 = Math.floor((obj.start - 1) / 4)
        const x2 = (obj.end - 1) % 4
        const y2 = Math.floor((obj.end - 1) / 4)
        const A = Math.abs(y1 - y2) + 1
        const B = Math.abs(x1 - x2) + 1
        return Math.abs(A / B).toFixed(2)
      },
      // 选择图片
      handleSelectImage () {
        this.areas[this.curArea].url = this.selectedImg.url
        this.dialog = false
      },
      handleBackOneStep () {
        // console.log(this.areas)
        // console.log(this.curArea)
        this.areas.splice(this.curArea, 1)
        this.curArea = null
      }
    }
  }
</script>
<style lang="scss">
  .cube_editor {
    .cube{position:relative;display:flex;flex-wrap:wrap;margin: 15px 0;}
    .cube_item{position:relative;margin:-1px 0 0 -1px;cursor:pointer;border:1px solid #bbb;box-sizing:border-box;}
    .cube_item:after{content:'+';position:absolute;top:50%;left:50%;margin:-15px 0 0 -8px;font-size:24px;line-height:1;color:#bbb;}
    .cube_area{position:absolute;background:#e8f7fd;border:1px solid #bdf;text-align:center;cursor:pointer;}
    .cube_area.actived{border:1px solid #38f;z-index:999}
    .cube_area .area_info{position:absolute;top:50%;margin-top:-9px;width:100%;color:#88c4dc}
    .cube_area .area_delete{position:absolute;top:0;right: 0;font-size: 15px;cursor: pointer;}
  }
</style>
